<template>
    <a-input
      :name="item.field"
      :model-value="modelValue"
      :placeholder="item.placeholder || '请输入'+item.label"
      :disabled="item.disabled || false"
      :type="item.type || 'text'"
      :allow-clear="item.allowClear || true"
      :size="item.size || 'default'"
      :addon-before="item.addonBefore || ''"
      :addon-after="item.addonAfter || ''"
      :prefix="item.prefix || ''"
      :suffix="item.suffix || ''"
      @focus="handleFocus"
      @blur="handleBlur"
      @pressEnter="handlePressEnter"
      @change="handleChange"
    />
  </template>
  
  <script setup lang="ts">
  interface Item {
    component: string;
    label: string;
    field: string;
    rules?: Array<object>;
    placeholder?: string;
    disabled?: boolean;
    type?: string;
    allowClear?: boolean;
    size?: 'large' | 'middle' | 'small';
    addonBefore?: string;
    addonAfter?: string;
    prefix?: string;
    suffix?: string;
  }
  
  const props = defineProps<{ 
    item: Item
    modelValue?: string | number | (string | number)[]
  }>();
  
  // 事件处理
  const emit = defineEmits<{
    (e: 'focus', event: FocusEvent): void;
    (e: 'blur', event: FocusEvent): void;
    (e: 'pressEnter', event: KeyboardEvent): void;
    (e: 'update:model-value', value: string): void;
  }>();
  
  const handleFocus = (event: FocusEvent) => {
    emit('focus', event);
  };
  
  const handleBlur = (event: FocusEvent) => {
    emit('blur', event);
  };
  
  const handlePressEnter = (event: KeyboardEvent) => {
    emit('pressEnter', event);
  };


  const handleChange = (event: Event) => {
    emit('update:model-value', (event.target as HTMLInputElement).value);
  };
  </script>
  
  <style scoped></style>